import 'package:flutter/material.dart';

class TabBarDemo extends StatelessWidget {

  const TabBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 添加顶部导航条
    return DefaultTabController(
      // 切换的数量
        length:2,
        child: Scaffold(
            appBar: AppBar(
              // App标题
              title:const Text('Tab_Bar组件'),
              // 无论什么平台，标题都居中
              centerTitle: true,
              // 背景颜色
              backgroundColor: Colors.red,
              // 标签栏
              bottom: const TabBar(
                // 指示器的大小
                indicatorSize: TabBarIndicatorSize.label,
                // 标签
                tabs: <Widget>[
                  Tab(text:"热门"),
                  Tab(text:"推荐")
                ],
              ),
            ),
            // 标签页所对应的页面
            body:TabBarView(
              children: <Widget>[
                ListView(
                    children:const <Widget>[
                      Center(child:ListTile(
                          title:Text("热门内容")
                      ))
                    ]
                ),
                ListView(
                    children:const <Widget>[
                      ListTile(
                          title:Text("推荐内容")
                      )
                    ]
                )
              ],
            )
        )
    );
  }
}